<!--
 * @Author: 子君
 * @Date: 2020-07-08 16:12:32
 * @LastEditors: 子君
 * @LastEditTime: 2020-07-17 09:44:16
 * @Description: 文件说明
 * @FilePath: \vue-base\src\views\home\index.vue
-->
<template>
  <div class="home">
    <van-notice-bar scrollable text="前端实验室，我们一起玩前端" />
    <van-list>
      <van-cell
        title="点击使用confirm装饰器"
        value="还有更多装饰器哦"
        @click="$_handleUseDecorator"
      />
      <van-cell title="加载数据" @click="$_loadData" />
      <van-cell title="使用日期工具类" :value="`今天是${currentDate}`" />
      <van-cell title="你看，右下角有一个vConsole,用来调试的" />
      <van-cell title="你再看，地址栏有一个?VNK=xxx,这是路由缓存" />
    </van-list>
    <van-cell-group title="聊天室">
      <van-cell title="websocket 聊天室" value="进入" is-link to="chat/websocket" />
      <van-cell title="socket.io 聊天室" value="进入" is-link to="chat/socketIO" />
    </van-cell-group>
    <van-sticky>
      <van-search
        v-model="searchValue"
        placeholder="输入路由地址或页面title搜索"
      />
    </van-sticky>
    <van-cell-group title="demo">
      <van-cell
        v-for="item in $router.options.routes"
        v-show="showRouter(item)"
        :key="item.path"
        is-link
        :to="{ path: item.path, query: $route.query }"
        :title="item.path"
        :value="item.meta && item.meta.title"
      />
    </van-cell-group>
  </div>
</template>

<script>
// 使用vant 组件
import { List, NoticeBar, Cell, Notify, CellGroup, Search, Sticky } from 'vant'

// 使用装饰器
import { confirm } from '@/decorator'

// 使用日期工具类
import { format, DATE_FMT } from '@/utils/date'

// 接口
import { getDemoData } from '@/api/home'

export default {
  name: 'Home',
  components: {
    [List.name]: List,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [NoticeBar.name]: NoticeBar,
    [Sticky.name]: Sticky,
    [Search.name]: Search
  },
  data() {
    return {
      currentDate: format(new Date(), DATE_FMT),
      searchValue: ''
    }
  },
  created() {

  },

  methods: {
    @confirm('这是通过装饰器添加的确认信息', '提示')
    $_handleUseDecorator() {
      console.log(`
        你还可以使用
        @alert 提示框
        @throttle 函数节流
        @debounce 函数防抖
        更多装饰器正在完善中
      `)
    },
    // 加载数据
    async $_loadData() {
      const loading = this.$loading()
      try {
        console.log(await getDemoData())
        Notify({
          message: '数据加载成功',
          type: 'success'
        })
      } catch (error) {
        console.error(error)
      } finally {
        loading.close()
      }
    },
    showRouter(route) {
      if (route.path === '/') {
        return false
      }
      if (this.searchValue) {
        if (
          route.path.indexOf(this.searchValue) != -1 ||
          (route.meta && route.meta.title.indexOf(this.searchValue) != -1)
        ) {
          return true
        } else {
          return false
        }
      }
      return true
    }
  }
}
</script>
<style lang="less" scoped>
.home {
  /** 审查元素，这个样式会转换为 font-size: 4.267vw; */
  font-size: 24px;
}
</style>
